<template>
  <!--  主容器  -->
  <div id="hl-main-container" class="hl-main-container">
    <div id="hl-context-container" class="hl-second-container">
      <div id="hl-operate-container" class="hl-operate-container">
        <div class="hl-button-container">
          <el-button type="primary" icon="el-icon-delete" size="small" @click="deleteHouse('undefined')"></el-button>
          <el-button type="primary" icon="el-icon-circle-plus-outline" size="small" @click="addHouse"></el-button>
          <el-button type="primary" size="small" @click="publish">发布<i class="el-icon-upload2"></i></el-button>
          <el-button type="primary" size="small" @click="unpublish">下架<i class="el-icon-download"></i></el-button>
        </div>

      </div>
      <div id="hl-search-container" class="hl-search-container">
        <div id="hl-search-one" class="hl-search-one">
          <el-select v-model="statusType" style="width: 130px"
                     slot="prepend" placeholder="请选择" size="mini">
            <el-option label='请选择状态' value="-1"></el-option>
            <el-option
              v-for="option in statuss"
              :key="option.value"
              :label="option.label"
              :value="option.value"
            ></el-option>
          </el-select>
          <el-select v-model="publishType" style="width: 130px"
                     slot="prepend" placeholder="请选择" size="mini">
            <el-option label='请选择发布情况' value="-1"></el-option>
            <el-option
              v-for="option in publishs"
              :key="option.value"
              :label="option.label"
              :value="option.value"
            ></el-option>
          </el-select>
        </div>
        <div id="hl-search-two" class="hl-search-two">
          <el-input placeholder="请输入内容" v-model="searchContext" class="input-with-select">
            <el-select v-model="searchType" slot="prepend" placeholder="请选择">
              <el-option label="名称" value="1"></el-option>
              <el-option label="地址" value="2"></el-option>
            </el-select>
            <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
          </el-input>
        </div>
      </div>
      <div id="hl-table-container">
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          border
          height="100%"
          style="width: 100%"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="index"
            width="30"
            align="center">
          </el-table-column>
          <el-table-column
            type="selection"
            align="center"
            width="55">
          </el-table-column>
          <el-table-column
            prop="huuid"
            label="房源id"
            align="center"
            width="110">
          </el-table-column>
          <el-table-column
            prop="name"
            label="名称"
            align="center"
            width="120">
          </el-table-column>
          <el-table-column
            prop="area"
            label="面积"
            align="center"
            width="100"
            show-overflow-tooltip>
            <template slot-scope="scope">
              <!-- 使用 slot-scope="scope" 来访问每一行的数据 -->
              <!-- 在数据后面添加固定文本，例如 "平方米" -->
              {{ scope.row.area }} 平方米
            </template>
          </el-table-column>
          <el-table-column
            prop="houseType"
            label="户型"
            align="center"
            width="80">
          </el-table-column>
          <el-table-column
            prop="detailAddress"
            label="地址"
            align="center"
            width="150">
          </el-table-column>
          <el-table-column
            prop="picture"
            label="图片"
            align="center"
            width="150">
            <template slot-scope="scope">
              <img :src="scope.row.picture" style="max-width: 125px; max-height: 125px;">
            </template>
          </el-table-column>
          <el-table-column
            prop="status"
            label="状态"
            align="center"
            width="65">
            <template slot-scope="scope">
              <span
                :style="{ color: scope.row.status === '已出租' ? 'green' : (scope.row.status === '未出租' ? 'orange' : 'red')  }">{{
                  scope.row.status
                }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="publish"
            label="是否发布"
            align="center"
            width="80">
            <template slot-scope="scope">
              <span :style="{ color: scope.row.publish === '未发布' ? 'red' : 'green' }">{{ scope.row.publish }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="updateTime"
            label="修改日期"
            align="center"
            width="100">
            <!-- 使用 formatter 自定义时间格式 -->
            <template slot-scope="scope">
              {{ formatDate(scope.row.updateTime) }}
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作">
            <template slot-scope="scope">
              <el-button @click="deleteHouse(scope.row)" type="text" size="small">删除</el-button>
              <el-button @click="editHouse(scope.row)" type="text" size="small">编辑</el-button>
              <el-button @click="toggleStatus(scope.row,scope.$index)" type="text" size="small"
                         :style="{ color: scope.row.status === '禁用' ? 'green' : 'red' }">
                {{ scope.row.status === '禁用' ? '启用' : '禁用' }}
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="page">
        <el-pagination
          :current-page="currentPage"
          :page-sizes="[5,10, 15, 20, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalNumber"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange">
        </el-pagination>
      </div>
    </div>
    <div id="hl-dialog-container" class="hl-dialog-container">
      <div v-if="isEditVisible" class="hl-dialog">
        <edit-dialog :editData="editData" @closeEdit="closeDialog"/>
      </div>
      <div v-if="isAddVisible" class="hl-dialog">
        <add-dialog @closeAdd="closeDialog"/>
      </div>
    </div>
  </div>
</template>

<script>
import {getHouseSource, deleteHouse, updatePublish, updateStatus,searchHouse} from "./houseListJs";
import {dictionaryRequest} from "../../../util/js/globalRequestJs";
import {blurElement, formatDate, gradeElement} from "../../../util/js/utils";

import EditHouse from "./dialog/EditHouse.vue";
import AddHouse from "./dialog/AddHouse.vue";

export default {
  name: "HouseList",
  components: {
    'edit-dialog': EditHouse,
    'add-dialog': AddHouse
  },
  data() {
    return {
      // 搜索
      statuss: [],
      publishs: [],
      statusType: '-1',
      publishType: '-1',
      searchContext: '',
      searchType: '',

      // 表格
      tableData: [],
      totalNumber: 30, //总数量
      currentPage: 1, //页码
      pageSize: 5, //每页条数
      multipleSelection: [],   // 这个的作用是保存选中的数据

      // 弹窗
      isEditVisible: false,
      isAddVisible: false,
      editData: {}
    }
  },
  // 加载页面时获取数据
  mounted() {
    this.getHouseData();
    // 渲染下拉选项值
    this.downSelect();
  },
  methods: {
    formatDate,
    // 赋值给菜单栏
    downSelect() {
      dictionaryRequest('house', 'status').then(res => {
        this.statuss = res.data;
      }).catch(error => {
        console.log(error);
      });
      dictionaryRequest('house', 'publish').then(res => {
        this.publishs = res.data;
      }).catch(error => {
        console.log(error);
      });
    },
    // 获取房源信息
    getHouseData() {
      this.search();
    },
    // 获取选择的行数据
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 获取页码变化，并刷新数据
    handleCurrentChange(newPage) {
      this.currentPage = newPage;
      this.getHouseData();
    },
    // 获取条数变化，并刷新数据
    handleSizeChange(newSize) {
      this.pageSize = newSize;
      this.getHouseData();
    },
    // 删除（包含批量删除和单点删除）
    deleteHouse(row) {
      const _this = this;
      let ids = []
      // 获取选中行的ID信息
      if (row !== 'undefined') {
        ids.push(row.huuid);
      } else {
        if (_this.multipleSelection.length === 0) {
          _this.$message.warning("您未选中数据！")
          return null;
        }
        ids = _this.multipleSelection.map(row => row.huuid);
      }
      _this.$confirm("请再次确认是否删除房源信息", "提示", {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        deleteHouse(JSON.stringify(ids)).then(res => {
          if (res.code === '200') {
            _this.$message.info('删除成功')
            // 刷新房源信息
            _this.getHouseData();

          } else {
            _this.$message.error(res.msg);
          }
        }).catch(error => {
          console.log('系统出错了！', error);
        })
      }).catch(() => {
        _this.$message.info('已取消删除')
      })
    },
    // 编辑
    editHouse(row) {
      const _this = this;
      _this.editData = row;
      _this.isEditVisible = true;
      // 设置层次等级并设置模糊
      gradeElement('hl-dialog-container', 3)
      blurElement('hl-context-container', 1.5);
    },
    // 关闭弹窗
    closeDialog() {
      // 设置层次等级并设置模糊
      gradeElement('hl-dialog-container', 1)
      blurElement('hl-context-container', 0);
      // 刷新数据
      this.getHouseData();
      if (this.isEditVisible) {
        this.isEditVisible = false;
      }
      if (this.isAddVisible) {
        this.isAddVisible = false;
      }
    },
    // 发布
    publish() {
      const _this = this;
      // 获取选中行的ID信息
      if (_this.multipleSelection.length === 0) {
        _this.$message.warning("您未选中数据！")
        return null;
      }
      const id = _this.multipleSelection.map(row => row.huuid);
      updatePublish(id.join(','), '1').then(res => {
        if (res.code === '200') {
          // 发布成功，刷新数据
          _this.$message.success("发布成功");
          _this.getHouseData();
        } else {
          _this.$message.error(res.msg);
        }
      }).catch(error => {
        console.log("系统出错了", error);
      })
    },
    // 下架
    unpublish() {
      const _this = this;
      // 获取选中行的ID信息
      if (_this.multipleSelection.length === 0) {
        _this.$message.warning("您未选中数据！")
        return null;
      }
      const ids = _this.multipleSelection.map(row => row.huuid);
      updatePublish(ids.join(','), '0').then(res => {
        if (res.code === '200') {
          // 发布成功，刷新数据
          _this.$message.success("下架成功");
          _this.getHouseData();
        } else {
          _this.$message.error(res.msg);
        }
      }).catch(error => {
        console.log("系统出错了", error);
      })
    },
    // 禁用和启用该信息
    toggleStatus(row, index) {
      const _this = this;
      // 获取状态信息确定功能，禁用状态为启用功能，非禁用则为禁用功能
      if (row.status === '禁用') {
        // 启用
        updateStatus(row.huuid, '0').then(res => {
          if (res.code === '200') {
            _this.$message.success("数据" + (index + 1) + "启用成功!")
            // 获取数据
            _this.search();
          } else {
            _this.$message.error(res.msg);
          }
        }).catch(error => {
          console.log("系统出错了!", error)
        })
      } else {
        // 禁用
        updateStatus(row.huuid, '2').then(res => {
          if (res.code === '200') {
            _this.$message.success("数据" + (index + 1) + "禁用成功!")
            // 获取数据
            _this.search();
          } else {
            _this.$message.error(res.msg);
          }
        }).catch(error => {
          console.log("系统出错了!", error)
        })
      }
    },
    // 新增房源信息
    addHouse(){
      // 打开弹窗
      this.isAddVisible = true;
      // 设置层次等级并设置模糊
      gradeElement('hl-dialog-container', 3)
      blurElement('hl-context-container', 1.5);
    },
    // 搜索
    search() {
      const _this = this;
      const searchData = {
        "statusType" : _this.statusType,
        "publishType" : _this.publishType,
        "searchType" : _this.searchType,
        "searchContext" : _this.searchContext,
        'currentPage': _this.currentPage,
        'pageSize': _this.pageSize
      }
      searchHouse(searchData).then(res => {
        if (res.code === '200') {
          // 请求成功，获取数据
          this.totalNumber = res.data.totalNumber;
          this.tableData = res.data.data;
        }else{
          _this.$message.error(res.msg);
        }
      }).catch(err => {
      console.log("系统出错了！",err)
      })
    }
  }
}
</script>

<style scoped>
@import "houseListCss.css";
</style>
